<template>
  <!-- 新增部门的弹出层，点击x号的时候会触发close事件 -->
  <el-dialog
    :title="dialogTitle"
    :visible="showDialog"
    width="50%"
    @close="btnCancel"
  >
    <!-- 主体内容 -->
    <el-form
      label-width="100px"
      :model="formData"
      :rules="formRules"
      ref="addDeptFormRef"
    >
      <el-form-item label="部门名称" prop="name">
        <el-input
          style="width: 90%"
          placeholder="1-20个字符"
          v-model="formData.name"
        ></el-input>
      </el-form-item>
      <el-form-item label="部门编码" prop="code">
        <el-input
          style="width: 90%"
          placeholder="1-20个字符"
          v-model="formData.code"
        ></el-input>
      </el-form-item>
      <el-form-item label="部门负责人" prop="manager">
        <el-select
          style="width: 90%"
          v-model="formData.manager"
          @focus="selectManager"
        >
          <el-option
            v-for="item in peoples"
            :key="item.id"
            :label="item.username"
            :value="item.username"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="部门介绍" prop="introduce">
        <el-input
          style="width: 90%"
          placeholder="1-300个字符"
          type="textarea"
          :rows="3"
          v-model="formData.introduce"
        ></el-input>
      </el-form-item>
    </el-form>
    <!-- 底部内容 -->
    <el-row type="flex" justify="center">
      <el-col :span="6">
        <el-button @click="btnCancel" size="small">取 消</el-button>
        <el-button type="primary" size="small" @click="btnOk">确 定</el-button>
      </el-col>
    </el-row>
  </el-dialog>
</template>

<script>
// 引入api
import {
  getDepartments,
  addDepartment,
  getDeptDetail,
  updateDepartment,
} from "@/api/departments";
import { getEmployeeSimple } from "@/api/employees";

export default {
  props: {
    showDialog: {
      type: Boolean,
      default: false,
    },
    treeNode: {
      type: Object,
      default: null,
    },
  },
  data() {
    //   自定义校验规则
    // 检查同一级部门是否存在同名部门
    var checkNameRepeat = async (rule, value, callback) => {
      // value和统计部门下的部门比较，是否存在同名的
      //   发请求，获取最新的部门数据
      let { depts } = await getDepartments();
      // 父级id
      let pid = "";
      if (this.formData.id) {
        // 如果是编辑状态,就要获取同一级的数据
        pid = this.formData.pid;
        // 排除自身
        depts = depts.filter((item) => {
          return item.id !== this.formData.id;
        });
      }
      //  找出这个父部门下的所有子部门
      const isRepeat = depts
        .filter((item) => {
          return item.pid == pid;
        })
        .some((item) => {
          //   检查子部门中有没有同名的部门
          return item.name === value;
        });
      if (isRepeat) {
        return callback(new Error(`当前部门下面存在${value}部门`));
      }
      callback();
    };
    // 检查部门编码是否重复
    var checkCodeRepeat = async (rule, value, callback) => {
      //   发请求，获取最新的部门数据
      let { depts } = await getDepartments();
      if (this.formData.id) {
        // 如果是编辑状态，排除自身
        depts = depts.filter((item) => {
          return item.id !== this.formData.id;
        });
      }
      // value不为空串
      const isRepeat = depts.some((item) => item.code === value && value);
      //   isRepeat ? callback(new Error(`已经存在该部门编码`)) : callback();
      if (isRepeat) {
        return callback(new Error(`已经存在该部门编码`));
      }
      callback();
    };
    return {
      // 表单数据
      formData: {
        name: "",
        code: "",
        manager: "",
        introduce: "",
      },
      // 校验规则
      formRules: {
        name: [
          { required: true, message: "部门名称不能为空", trigger: "blur" },
          { min: 1, max: 20, message: "部门名称长度为1-20", trigger: "blur" },
          { trigger: "blur", validator: checkNameRepeat }, //自定义校验规则，检查同一父级下面是否存在同名的部门
        ],
        code: [
          { required: true, message: "部门代码不能为空", trigger: "blur" },
          { min: 1, max: 20, message: "部门代码长度为1-20", trigger: "blur" },
          { trigger: "blur", validator: checkCodeRepeat },
        ],
        manager: [
          { required: true, message: "部门领导不能为空", trigger: "blur" },
        ],
        introduce: [
          { required: true, message: "部门介绍不能为空", trigger: "blur" },
          { min: 1, max: 300, message: "部门介绍长度为1-300", trigger: "blur" },
        ],
      },
      //   员工数据
      peoples: [],
    };
  },
  computed: {
    // 标题，计算属性
    dialogTitle() {
      return this.formData.id ? "编辑部门" : "新增部门";
    },
  },
  methods: {
    //   选择部门管理员
    async selectManager() {
      const result = await getEmployeeSimple();
      this.peoples = result;
    },
    // 点击确定，提交表单
    btnOk() {
      this.$refs.addDeptFormRef.validate(async (valid) => {
        if (valid) {
          // 表单校验通过,发送请求
          // 处理请求数据
          if (this.formData.id) {
            // 修改
            await updateDepartment({ ...this.formData });
          } else {
            // 添加
            await addDepartment({ ...this.formData, pid: this.treeNode.id });
          }
          // 重新发起请求，更新页面数据
          this.$emit("addDeptFinish");
          // 关闭弹层,使用sync修饰符，简写模式
          // 固定写法 update:props属性，值
          // 关闭弹层的时候会触发他的 close事件，就会执行回调函数btnCancel，会清除数据
          this.$emit("update:showDialog", false);
          // 重置表单，移除校验  这里可以不用写，因为会清除
          // this.$refs.addDeptFormRef.resetFields();
        }
      });
    },
    // 点击取消
    btnCancel() {
      // 关闭弹层,使用sync修饰符，简写模式
      // 固定写法 update:props属性，值
      this.$emit("update:showDialog", false);
      // 重置表单，移除校验
      // 只能重置定义在data中的属性，不能重置id,还是需要手动清空
      this.formData = {
        name: "",
        code: "",
        manager: "",
        introduce: "",
      };
      this.$refs.addDeptFormRef.resetFields();
    },
    // 获取部门详情方法
    async getDeptDetail(id) {
      // props传值是异步的，这里参数不能使用 this.treeNode.id
      const result = await getDeptDetail(id);
      this.formData = result;
    },
  },
};
</script>

<style lang="less" scoped>
</style>